<template>
	<view class="container">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#FFF5D5"
			indicator-active-color="#FCC309" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in imgs" :key="index">
				<image class="banner-img" :src="item.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="store-info-container">
			<view class="store-card">
				<view class="store-card-container">
					<view class="store-name">{{ storeInfo.name }}</view>
					<view class="store-address">
						<view class="store-address-item">
							<image :src="storeAddrIcon"></image>
							<view class="context ">{{ storeInfo.addr ||''}}</view>
						</view>
						<view class="store-address-item" @click="callPhone">
							<image :src="storePhotoIcon"></image>
							<view class="context ">{{ storeInfo.phone||'' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="time-card">
				<view class="time-card-container">
					<view @click="openUniCalendar" class="time-card-container-context">
						<view class="context-time">
							<view>{{ query_filter.beginTime | formatDate }}</view>
							<view class="middle-text">至</view>
							<view>{{ query_filter.endTime | formatDate }}</view>
						</view>
						<view class="context-time-number">
							<view>共{{ submitObj.CheckInDays }}晚</view>
							<image class="context-time-number-image" src="../../../static/images/right.png"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="time-card">
				<uni-data-select v-model="value" placeholder="请选择店铺" :localdata="shopId"
					@change="change"></uni-data-select>
			</view>


			<view class="room-type-container">
				<view v-if="storeGustroomTypeList.length > 0">
					<view class="room-type-container-item" v-for="(item, index) in storeGustroomTypeList" :key="index">
						<view class="item-card">
							<view class="card-image"
								:style="{ backgroundImage: 'url( ' + (item.img ? item.img : roomDefaultIcon) + ' )' }">
							</view>
							<view class="card-right">
								<view class="room-name">{{ item.name | initFormatStr }}</view>
								<view style="margin-top: -24rpx;">
									<view class="room-monitor">电脑屏幕：{{ item.monitor || '27寸/2K/144Hz/直屏' }}</view>
									<view class="room-other">电脑显卡：{{ item.gpu || 'Rtx3036' }} {{ item.memory ||' 32G' }}
									</view>
									<view class="room-wifi">
										<span style="margin-right: 30rpx;;">住:{{ item.capNum }}人</span>
										<span>WIFI: {{item.wifi?'有':'无'}}</span>
									</view>
									<view class="room-other">配置：{{ item.otherConfigStr || '沙发 新风系统 电竞座椅 抱枕' }}</view>
								</view>
								<view class="room-price">{{ item.actual_price | formatMoneyRmbUnit }}</view>
							</view>
							<view class="reserve-room-container">
								<view class="reserve-room-btn" v-if="item.room_num > 0" @click="reserveConfrim(item)">
									<view class="reserve_room_num">剩{{ item.room_num }}间</view>
									<text>预定</text>
								</view>
								<view class="reserve-no-room-btn" v-else><text>满房</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>暂无客房类型</view>
			</view>
		</view>
		<good-date-picker ref="calendar" @change="changeCalendar" :option="goodDatePickerOption"></good-date-picker>
	</view>
</template>

<script>
	import {
		isLogin,
		toLogin,
		formatTime,
		successToShow,
		errorToShow,
		formatDate,
		getAddDateStr,
		formatDateToChinese,
		showShareMenu
	} from '@/config/common.js';
	import {
		searchXyStoreGuestRoomListByStoreAlias,
		getStoreRoomNumber,
		queryRoomByStoreId,
		shopStoreId,
		shopRoomByStoreId,
		getGuestRoomDelData
	} from '@/constant/xyGuestRoom.js';
	import {
		getCurrentLocation,
		subStringLength,
		createPhoneCall
	} from '@/config/utils.js';
	import storeAddrIcon from '@/static/images/store-addr-icon.png';
	import storePhotoIcon from '@/static/images/store-photo-icon.png';
	import roomDefaultIcon from '@/static/images/guest-room-default-icon.png';
	import goodDatePicker from '@/components/xiaomiaogu-good-date-picker/xiaomiaogu-good-date-picker.vue';
	import {
		getRoomImg
	} from '@/constant/home.js';

	export default {
		components: {
			goodDatePicker
		},
		data() {
			return {
				indicatorDots: true,
				storeAddrIcon: storeAddrIcon,
				storePhotoIcon: storePhotoIcon,
				roomDefaultIcon: roomDefaultIcon,
				autoplay: false,
				interval: 10000,
				duration: 500,
				goodDatePickerOption: {},
				calendarStartTime: getAddDateStr(0),
				calendarInfo: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				query_filter: {
					beginTime: '',
					endTime: '',
					StoreAlias: '',
					Latitude: '',
					Longitude: ''
				},
				submitObj: {
					CheckInDays: 1,
					CheckInDate: '',
					CheckOutDate: '',
					RoomTypeId: '',
					RoomTypeName: '',
					XingYunStoreAlias: '',
					XingYunStoreName: '',
					RoomTypeInfo: {}
				},
				storeInfo: {

				},
				showObj: {},
				storeGustroomTypeList: [],
				swoingList: [],
				storeId: null,
				storeAlias: null,
				imgs: [],
				value: 0,
				shopId: [],
				storeAliasnew: 643880,
			};
		},
		onLoad: function(option) {
			console.log(option, '----')
			this.storeAlias = option.storeAlias
			this.storeId = option.storeId
			// this.loadHomeInfo();
			this.initQueryFilter(option);
			showShareMenu();
			this.getShopId()
		},
		onPullDownRefresh() {
			this.initQueryFilter();
		},
		filters: {
			initParamData: function(value) {
				return '1' == value ? '有' : '无';
			},
			initParamReplaceComma: function(value) {
				if (!value) {
					return '';
				}
				return value.replaceAll(',', ' ').replaceAll('，', ' ');
			},
			formatDate: function(value) {
				return formatDateToChinese(value);
			}
		},
		methods: {
			// 店铺id
			async getShopId() {
				const res = await shopStoreId()
				this.shopId = res.data.map(item => ({
					value: item.id,
					text: item.name
				}));
			},
			async change(e) {
				const res = await shopRoomByStoreId({
					deptId: e
				})
				this.storeAliasnew = res.data
				this.getdetails()
				console.log("转换星云店铺:", res);
			},

			async getdetails() {
				let json = {
					chain_store: '',
					type: 'store',
					log: '',
					lat: 1,
					store_alias: this.storeAliasnew,
					types: '',
					begin_time: this.query_filter.beginTime,
					end_time: this.query_filter.endTime,
					chain_alias: 457129,
					lon: 2
				}
				uni.request({
					url: 'https://jiudian.xingyunol.com/p/cooperation/v1/store',
					method: 'GET',
					data: json,
					success: (res) => {
						if (res.data.status === 0) {
							this.imgs = res.data.data.store_img
							this.storeInfo = res.data.data.store_info
							this.storeGustroomTypeList = res.data.data.list
							console.log(this.imgs, "res 客房id1------1")
						} else {
							console.log(res, "res 客房id------2")
						}

					},
					fail: (err) => {}
				})
			},
			async loadHomeInfo() {
				// let res = await getRoomImg();
				// this.swoingList = res;
				let params = {
					...this.query_filter,
					storeId: this.storeId,
					storeAlias: this.storeAlias
				}
				let res = await queryRoomByStoreId(params)
				console.log(res.query_filter, "23222")

			},
			initQueryFilter(option) {
				this.query_filter.beginTime = getAddDateStr(0);
				this.query_filter.endTime = getAddDateStr(this.submitObj.CheckInDays);
				this.goodDatePickerOption = {
					currentRangeStartDate: this.query_filter.beginTime, //根据实际业务需求设置的区间选择默认显示初始时间，可为空,默认今天
					currentRangeEndDate: this.query_filter.endTime, //根据实际业务需求设置的默认区间选择显示结束时间，可为空，默认明天
					initStartDate: this.calendarStartTime,
					isRange: true, //是否开启范围选择，默认false
					isModal: true //是否弹窗模式，默认false
				};
				this.getdetails()
			},
			callPhone() {
				createPhoneCall(this.storeInfo.phone);
			},
			openUniCalendar() {
				this.$refs.calendar.open();
			},
			changeCalendar(e) {
				this.query_filter.beginTime = e.startDate;
				this.query_filter.endTime = e.endDate;
				this.submitObj.CheckInDays = e.dateNum;
				this.initQueryFilter();
			},
			reserveConfrim(itemInfo) {
				this.clearSubmitObj();
				this.submitObj.CheckInDate = this.query_filter.beginTime;
				this.submitObj.CheckOutDate = this.query_filter.endTime;
				this.submitObj.RoomTypeId = itemInfo.id;
				this.submitObj.RoomTypeName = itemInfo.name;
				this.submitObj.RoomTypeInfo = itemInfo;
				this.submitObj.XingYunStoreAlias = this.storeInfo.addr;
				this.submitObj.XingYunStoreName = this.storeInfo.name;
				this.submitObj.XingYunAddress = this.storeInfo.address;

				this.submitConfirmParam();
			},

			async submitConfirmParam() {
				if (!this.submitObj.CheckInDate) {
					errorToShow('请选择入住时间段');
					return;
				}
				if (!this.submitObj.CheckOutDate) {
					errorToShow('请选择入住时间段');
					return;
				}
				if (!this.submitObj.RoomTypeId) {
					errorToShow('请选择房间类型');
					return;
				}
				if (!this.submitObj.XingYunStoreAlias) {
					errorToShow('请选择门店');
					return;
				}
				// await getStoreRoomNumber(this.submitObj);
				uni.navigateTo({
					url: '/packagePages/room/confirmGuestRoom?guestRoomOrder=' + encodeURIComponent(JSON
						.stringify(this.submitObj))
				});
			},
			clearSubmitObj() {
				this.submitObj.CheckInDate = '';
				this.submitObj.CheckOutDate = '';
				this.submitObj.RoomTypeId = '';
				this.submitObj.RoomTypeName = '';
				this.submitObj.XingYunStoreAlias = '';
				this.submitObj.XingYunStoreName = '';
				this.submitObj.RoomTypeInfo = {};
			},
			async searchXyStoreGuestRoomListByStoreAlias() {
				let result = await searchXyStoreGuestRoomListByStoreAlias(this.query_filter);
				this.storeInfo = result.store_info;
				result.list.forEach(item => {
					item.other_config_str = subStringLength(item.other_config_str, 40);
					item.style_config_str = subStringLength(item.style_config_str, 40);
				});
				this.storeGustroomTypeList = result.list;
				// if (result.store_img && result.store_img.length > 0) {
				// 	this.swoingList = result.store_img;
				// }
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		background-color: $main-page-color;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.banner-img {
		width: 750rpx;
		height: 300rpx;
	}

	.baner-top-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.store-info-container {
		width: 100%;
		min-height: 260rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.store-card {
			width: 100%;
			height: 100%;
			background-color: #fff;
			margin-bottom: 12rpx;
		}

		.time-card {
			width: 100%;
			height: 100%;
			background-color: #fff;
			margin-bottom: 12rpx;

			&-container {
				padding: 30rpx;
				height: 100%;
			}
		}
	}

	.store-card-container {
		padding: 30rpx;
		height: 100%;

		.store-name {
			font-size: $main-text-size-36;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.store-address {
			font-size: $main-text-size-28;
			color: $main-text-color-gray-33;

			&-item {
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;

				.context {
					width: calc(100% - 60rpx);
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.time-card-container-context {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 600;

		.context-time {
			display: flex;

			.middle-text {
				margin-left: 12rpx;
				margin-right: 12rpx;
			}
		}

		.context-time-number {
			display: flex;
			align-items: center;

			&-image {
				width: 15rpx;
				height: 27rpx;
				margin-left: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.room-type-container {
		min-height: 40rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.room-type-container-item {
		padding-bottom: 30rpx;

		.item-card {
			display: flex;
			justify-content: space-between;

			.card-image {
				width: 180rpx;
				height: 240rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				margin-right: 20rpx;
			}

			.card-right {
				width: calc(100% - 330rpx);
				padding-right: 20rpx;
				height: 240rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 24rpx;

				.room-name {
					font-size: $main-text-size-28;
					font-weight: bold;
					color: #333;
				}

				.room-wifi {
					font-size: $main-text-size-22;
					color: $main-text-color-grey;
				}

				.room-monitor {
					font-size: $main-text-size-22;
					color: $main-text-color-grey;
				}

				.room-price {
					font-size: $main-text-size-40;
					font-weight: bold;
					color: $main-text-color-main-orange;
				}

				.room-other {
					color: $main-text-color-grey;
					font-size: $main-text-size-22;
				}
			}
		}
	}

	.reserve-room-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.reserve-no-room-btn {
			width: 80rpx;
			color: #fff;
			background-color: #d9d9d9;
			padding: 15rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 6rpx;
			position: relative;
		}

		.reserve-room-btn {
			width: 80rpx;
			color: #fff;
			background-color: #f7772a;
			padding: 15rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 6rpx;
			position: relative;

			.reserve_room_num {
				position: absolute;
				background-color: #dc3326;
				right: -20rpx;
				top: -24rpx;
				font-size: 16rpx;
				border: 2rpx solid #ffffff;
				border-radius: 20rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}
		}
	}

	.empty {
		color: $main-text-color-gray-black;
	}
</style>

<style>
	.uni-calendar__header>>>.uni-calendar__backtoday {
		display: none;
	}
</style>